<template>
  <div class="existing-clients">
    <a-spin :spinning="loading" tip="Loading...">
      <div
        v-if="existingClientsObj.length === 0"
        style="display: flex; flex-direction: column; justify-content: center; align-items: center"
      >
        <NoData fontSize="100px" />
        <span style="color: rgba(107, 121, 142, 0.85)">No Data</span>
      </div>
      <div v-if="existingClientsObj.length !== 0">
        <div v-for="(item, index) in existingClientsObj" :key="index" class="ll-list">
          <div class="banner-list">
            <banner class="vw5" title="Year" :subTitle="String(item.paymentYear)" />
            <banner
              class="vw5"
              title="Past Commission Amount (In Total)"
              :subTitle="item.hisAmount + ' ' + item.currencyName"
            />
            <banner class="vw5" title="Current Commission Amount" :subTitle="item.amount + ' ' + item.currencyName" />
            <banner title="Current Commission" :subTitle="item.costMoney + ' ' + item.currencyName" />
          </div>
          <div class="commission-range">
            <div class="commission-range-top">
              <div class="left">Commission Range</div>
              <div class="center">Quota Amount</div>
              <div class="center">Commission Percentage</div>
              <div class="right">Commission</div>
            </div>
            <div v-if="item.filterDetails.length === 0" style="padding: 10px">no current commission</div>
            <div v-for="(item2, index2) in item.filterDetails" :key="index2" class="commission-range-list">
              <div class="left">{{ item2.roleSpan }}</div>
              <div class="center">{{ item2.saleMoney }} {{ item2.currencyName }}</div>
              <div class="center">{{ (item2.moneyPercent * 100).toFixed(2) + '%' }}</div>
              <div class="right">{{ item2.costMoney || 0 }} {{ item2.currencyName }}</div>
            </div>
          </div>
          <div class="invoice-detail">
            <div class="invoice-detail-top">Invoice Details</div>
            <a-table :columns="columns" :data-source="item.tableData" bordered :pagination="false">
              <template #emptyText>
                <e-empty>
                  <template #description>
                    <div>No Data</div>
                  </template>
                </e-empty>
              </template>
            </a-table>
          </div>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import banner from './banner.vue'
import NoData from '../../../../components/NoData.vue'
import pageColumns from '@/assets/script/page_columns.js'
import p from '@/api/performance.js'

const route = useRoute()
const receivedPayment = pageColumns.receivedPayment
const columns = reactive(receivedPayment)
const paymentNum = ref()
const employee = ref()
const existingClientsObj = ref([])
const performanceInvoices = ref([])
const loading = ref(false)

const getData = () => {
  loading.value = true
  p.getAdminPerformanceExistingClients({
    PaymentNum: paymentNum.value,
    EmpID: employee.value
  })
    .then(res => {
      if (res.code === 2000) {
        performanceInvoices.value = res.data.performanceInvoices
        if (res.data.existingClientsPerformance !== null && res.data.existingClientsPerformance.length > 0) {
          res.data.existingClientsPerformance.forEach(item1 => {
            let costMoney = 0
            if (item1.details.length > 0) {
              const arr = []
              item1.details.forEach(item2 => {
                costMoney += item2.costMoney ? item2.costMoney : 0
                item1.costMoney = costMoney

                if (item2.costMoney !== 0) {
                  arr.push(item2)
                }
                item1.filterDetails = arr
              })
            }

            const arr = []
            res.data.performanceInvoices.forEach(item2 => {
              if (Number(item1.paymentYear) === Number(item2.paytime.split(' ')[0].split('-')[0])) {
                arr.push(item2)
              }
              item1.tableData = arr
            })
          })
          existingClientsObj.value = res.data.existingClientsPerformance
        }
      }
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}

onMounted(() => {
  paymentNum.value = route.query.paymentNum
  employee.value = route.query.employee
  getData()
})
</script>

<style scoped lang="less">
.ll-list {
  margin-top: 20px;
  &:first-child {
    margin-top: 0;
  }
}
.banner-list {
  display: flex;
  padding-left: 12px;
}
.commission-range {
  margin-top: 24px;
  width: 100%;
  border: 1px solid @border-color;
  box-sizing: border-box;
  .commission-range-top {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid @border-color;
    background-color: @bg-color;
    box-sizing: border-box;
    display: flex;
    color: @text-gray;
  }
  .commission-range-list {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid @border-color;
    box-sizing: border-box;
    display: flex;
    color: @black-85p;
    &:last-child {
      border-bottom: none;
    }
  }
  .left,
  .center,
  .right {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .left,
  .center {
    border-right: 1px solid @border-color;
  }
  .left,
  .right {
    padding-left: 12px;
    padding-right: 12px;
  }
  .center,
  .right {
    justify-content: flex-end;
    padding-right: 12px;
  }
}
.invoice-detail {
  width: 100%;
  margin-top: 16px;
  .invoice-detail-top {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    border: 1px solid @border-color;
    //border-bottom: none;
    background-color: @bg-color;
    padding-left: 12px;
    color: @text-gray;
  }
}
.vw5 {
  margin-right: 5vw;
}
:deep(.ant-table-thead) > tr > th,
:deep(.ant-table-tbody) > tr > td {
  height: 40px !important;
  font-size: 12px !important;
}
:deep(.ant-table-thead) > tr > th {
  background-color: @milk !important;
  border-color: @border-color !important;
}
:deep(.ant-table-tbody) > tr:not(.table-striped) > td {
  border-color: @border-color !important;
}
</style>
